<template>
    <div class="img-box">

        <!--图片列表栏-->
        <div id="slider" class="mui-slider <!--mui-fullscreen 这个类是表示占用全屏（本质上就是定位），我们需要将它注释-->">
            <div id="sliderSegmentedControl"
                 class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <!--这段表达式的作用是默认让第一个栏目高亮，而我们点击哪个栏目那个就高亮是 mui 内部实现的-->
                    <a @click="getImgContent(imgCat.id)" v-for=" imgCat in imgCategorys" :key="imgCat.id"
                       :class="['mui-control-item', imgCat.id === 0 ? 'mui-active' : '']" href="#item1mobile"
                       data-wid="tab-top-subpage-1.html">
                        {{ imgCat.title }}
                    </a>
                </div>
            </div>
        </div>

        <!--图片内容-->
        <ImgContent-box :imgcts="imgContents"></ImgContent-box>
    </div>
</template>

<script>
    import mui from "../../lib/mui-master/dist/js/mui.min.js";

    /*     mui('.mui-scroll-wrapper').scroll({
              deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
         });*/

    // 导入子组件
    import ImgContent from "./ImgContent.vue";

    export default {
        name: "Photo",
        data() {
            return {
                imgCategorys: [],
                imgContents: [],
            };
        },

        created() {
            this.getImgCategorys();
            this.getImgContentAll();
        },

        // 当组件中的DOM结构被渲染好并放到页面中后，会执行这个钩子函数
        // 如果要操作DOM元素，最好在 mounted 里面，因为这个时候的 DOM 元素是最新的
        // 初始化滑动控件
        mounted() {
            mui('.mui-scroll-wrapper').scroll({
                deceleration: 0.0006 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.000
            });
        },

        methods: {

            //进入图片分享板块时 默认展示分类列表
            getImgCategorys() {
                this.$http.get('imgCategroys.main').then(function (result) {
                    if (result.status === 200) {
                        // console.log(result.body);
                        this.imgCategorys = result.body;
                        this.imgCategorys.unshift({id: 0, title: '全部'})
                    }
                })
            },

            //进入图片分享板块时 默认展示全部图片
            getImgContentAll() {
                this.$http.get("imgContentsAll.main").then(function (result) {
                    if(result.status === 200) {
                        this.imgContents = result.body;
                    }
                })
            },

            // 点击那个栏目展示栏目下面的所有图片
            getImgContent(imgCatId) {
                this.$http.get("imgContents.main?imgCatId=" + imgCatId).then(function (result) {
                    if (result.status === 200) {
                        // console.log(result.body);
                        this.imgContents = result.body;
                    }
                })
            }

        },
        components: {
            'ImgContentBox': ImgContent
        }
    }
</script>

<style lang="scss" scoped>
    * {
        touch-action: pan-y;
    }

    .mui-scroll {
        a {
            text-decoration: none;
        }
    }
</style>